<template>
  <div id="categoryList">
      <van-nav-bar
  title="商品列表"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
/>

    <van-tabs v-model="tabAction">
      <van-tab v-for="(item, index) in lists" :key="index" :title="item.name" >
        <h3>{{ item.name }}</h3>
        <p>{{ item.front_name }}</p>
        <div v-if="item.plist">
          <van-grid :border="true" :column-num="2">
            <van-grid-item
              v-for="(item, index) in item.plist.data"
              :key="index"
              :to="`/description/${item.id}`"
            >
              <van-image :src="item.list_pic_url" fit="contain" />
              <h4 class="shop">{{ item.name }}</h4>
              <p class="price">￥{{ item.retail_price }}元</p>
            </van-grid-item>
          </van-grid>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import axios from "axios";

export default {
  props: ["id"],
  data() {
    return {
      tabAction: 0,
      lists: [],
    };
  },
  async created() {
    let res = await axios.get(this.$root.api.GoodsCategory, {
      params: { id: this.id },
    });
    this.lists = res.data.data.brotherCategory;
    // console.log(this.lists);
    let id = this.lists[0].id;
    this.lists.forEach(async (item, index) => {
      item.plist = await this.getlist(item.id, 1);
    //   console.log(item.plist);
      this.$forceUpdate();
    });
  },

  methods: {
    async getlist(cid, page) {
      let res = await axios.get(
        `${this.$root.api.GoodsList}?categoryId=${cid}&page=${page}&size=20`
      );
    //   console.log(res);
      return res.data.data;
    },
    onClickLeft() {
    //   location.href = 'http://localhost:8080/classify'
    this.$router.go(-1)
    }
  },
};
</script>

<style lang="less">
#categoryList {
  background-color: rgb(235, 238, 238);
  h3 {
    font-size: 16px;
    margin-bottom: 5px;
  }
  p {
    font-size: 12px;
    color: rgb(173, 175, 179);
  }
  .price {
    color: red;
    font-size: 16px;
  }
  .shop {
    width: 100%;
    font-size: 14px;
    font-weight: 500;
    padding: 0 10px;
  }
}
</style>